<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1190625_m3wxzcfcc89.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>消息</title>
    <style>
        html,body{
            background-color: #F5F5F9;
        }
        .header{
            background-color: transparent!important;
        }
        .bg-blue{
            width: 100%;
            height: 1.04rem;
            padding-top: .44rem;
            background:linear-gradient(0deg,rgba(156,83,246,1) 0%,rgba(94,67,245,1) 100%);
        }
        .mui-title{
            color: #fff;
        }
        .mui-pull-left{
            color: #fff;
            font-weight: 100;
        }
        .main{
            padding-top: 0;
        }
        .type{
            width: 3.47rem;
            height: .83rem;
            background-color: #fff;
            border-radius: .05rem;
            margin: -0.53rem auto .1rem;
            box-shadow:1px 0px .06rem 0px rgba(99,99,99,0.1);
        }
        .type-item{
            position: relative;
        }
        .type-item img{
            width: .36rem;
            height: .36rem;
            margin: 0 auto .02rem;
        }
        .type-item .text{
            width: 100%;
            text-align: center;
            font-size: .12rem;
            color: #333;
        }
        .list{
            width: 100%;
            padding: 0 .14rem;
            overflow: hidden;
        }
        .list .item{
            width: 3.47rem;
            height: .83rem;
            margin-top: .1rem;
            border-radius: .05rem;
            background-color: #fff;
            padding: .18rem .14rem .16rem .14rem;
        }
        .list .item .left{
            position: relative;
        }
        .list .item .left img{
            width: .5rem;
            height: .5rem;
        }
        .list .item .right{
            width: 2.52rem;
        }
        .list .item .right .t{
            width: 100%;
            height: .2rem;
            line-height: .2rem;
           overflow: hidden;
        }
        .list .item .right .t .fl{
            font-size: .16rem;
            color: #333; 
        }
        .list .item .right .t .fr{
            font-size: .12rem;
            color: #999;
        }
        .list .item .right .b{
            width: 100%;
            height: .16rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: .16rem;
            text-align: left;
            font-size: .12rem;
            color: #999;
            margin-top: .1rem;

        }
        .msg-list{
            min-width: .17rem;
            height: .17rem;
            line-height: .17rem;
            position: absolute;
            right: -0.09rem;
            top: -0.05rem;
            background-color: #F3435A;
            opacity: .9;
            padding: 0 .05rem;
            border-radius: .08rem;
            font-size: .12rem;
            color: #fff;
        }
        .top_red_bg{
            width: .06rem;
            height: .06rem;
            border-radius: 50%;
            position: absolute;
            top: 0;
            right: 0;
            background-color: #F3435A;
        }
    </style>
</head>
<body>
    <header class="header mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">消息</h1>
    </header>
    <div class="main">
        <div class="bg-blue"></div>
        <div class="type flex align-items space-around">
            <div class="xitong type-item">
                <img src="../../image/msg_right.png" alt="">
                <div class="text">系统消息</div>
                <div class="top_red_bg"></div>
            </div>
            <div class="tongzhi type-item">
                <img src="../../image/msg_left.png" alt="">
                <div class="text">通知信息</div>
                <div class="top_red_bg"></div>
            </div>
        </div>
        <div class="list">
            <div class="item">
                <div class="left fl">
                    <span><img src="../../image/msg_user.png" alt=""></span>
                    <div class="msg-list">11</div>
                </div>
                <div class="right fr">
                    <div class="t"><span class="fl">配骑官方商城</span><span class="fr">08:22</span></div>
                    <div class="b">你好，这个库存充足，可以直接拍的哦</div>
                </div>
            </div>
            <div class="item">
                <div class="left fl">
                    <img src="../../image/msg_user.png" alt="">
                </div>
                <div class="right fr">
                    <div class="t"><span class="fl">配骑官方商城</span><span class="fr">08:22</span></div>
                    <div class="b">你好，这个库存充足，可以直接拍的哦</div>
                </div>
            </div>
            <div class="item">
                <div class="left fl">
                    <img src="../../image/msg_user.png" alt="">
                </div>
                <div class="right fr">
                    <div class="t"><span class="fl">配骑官方商城</span><span class="fr">08:22</span></div>
                    <div class="b">你好，这个库存充足，可以直接拍的哦</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../js/common.js"></script>
</html>